<template>
  <div class="app-container">
    <div id="DeviceChart" class="chart" ref="chartRef"></div>
    <div class="text-container">
      <div class="card-grid">
        <div class="card">
          <div>监控设备(台):</div>
          <div class="number">{{ stats.monitor }}</div>
        </div>
        <div class="card">
          <div>文丘里水泵机(台):</div>
          <div class="number">{{ stats.pump }}</div>
        </div>
        <div class="card">
          <div>气象站(台):</div>
          <div class="number">{{ stats.weather }}</div>
        </div>
        <div class="card">
          <div>其他(台):</div>
          <div class="number">{{ stats.others }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, computed, ref, onUnmounted } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  setup() {
    const stats = reactive({
      monitor: 2,
      pump: 1,
      weather: 1,
      others: 2,
    });

    const total = computed(() => stats.monitor + stats.pump + stats.weather + stats.others);

    const chartRef = ref<HTMLDivElement | null>(null); // 图表的 DOM 引用
    let chart: echarts.ECharts | null = null; // 存储图表实例

    const initChart = () => {
      if (chartRef.value) {
        chart = echarts.init(chartRef.value); // 初始化图表
        const option = {
          series: [
            {
              type: 'pie',
              radius: ['60%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'center',
                formatter: () => `设备总数\n${total.value}`,
                fontSize: '1.3rem',
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                borderRadius: 5, // 为每个饼图项添加圆角
              },
              data: [
                { value: stats.monitor, name: '监控设备' },
                { value: stats.pump, name: '文丘里水泵机' },
                { value: stats.weather, name: '气象站' },
                { value: stats.others, name: '其他' },
              ],
            },
          ],
        };
        chart.setOption(option);
      }
    };

    const handleResize = () => {
      if (chart) {
        chart.resize(); // 触发图表的 resize 方法
      }
    };

    onMounted(() => {
      initChart();

      // 使用 ResizeObserver 监听容器大小变化
      const observer = new ResizeObserver(handleResize);
      if (chartRef.value) {
        observer.observe(chartRef.value); // 监听图表容器
      }

      // 清理观察器
      onUnmounted(() => {
        observer.disconnect();
        if (chart) {
          chart.dispose(); // 销毁图表实例
          chart = null;
        }
      });
    });

    return {
      stats,
      total,
      chartRef,
    };
  },
});
</script>

<style scoped>
.app-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.chart {
  width: 45%;
  height: 100%;
}

.text-container {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  flex: 1;
  height: 100%;
}

.card-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 10px; /* 调整间距 */
}

.card {
  display: flex;
  flex-direction: column; /* 文字和数字垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  text-align: center; /* 文字居中 */
  padding: 2px; /* 调整内边距 */
  font-size: 0.7rem;
  width: 100%;
  height: 100%;
}

.card .number {
  font-size: 2rem; /* 增大数字字体 */
  font-weight: bold; /* 字体加粗 */
  margin-top: 5px; /* 调整数字与文字的间距 */
}
</style>
